<template>
  <div class="summary-containner">
    <div>
      <div class="outMore">
        <div class="dataTitle">
          每日摘要
          <div class="titleRight">
            <i class="el-icon-arrow-left titleIcon"></i> <router-link to="/monitor/console">返回</router-link>
          </div>
        </div>
      </div>
      <div class="tadayTime">
        <span id="tadayText">今天</span>{{this.topTime}}
      </div>
      <el-row>
        <el-col :span="8" class="leftCol">
          <div class="dataContent">
            <div class="leftChild leftBody" @click="toDetailed" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)">
              <div class="dataView">
                <div class="viewTitle">设备活跃</div>
                <div>
                  <div class="startEquipment">
                    <div class="stateNumber">{{this.openEquip}}</div>
                    <div class="state">
                      <img :src="open"/>
                      <span class="smallTitle">已启动</span>
                    </div>
                  </div>
                  <div class="notEnabledEquipment">
                    <div class="stateNumberCenter">{{this.closeEquip}}</div>
                    <div class="state">
                      <img :src="close"/>
                      <span class="smallTitle">未启动</span>
                    </div>
                  </div>
                  <div class="allEquipment">
                    <div class="stateNumber">{{this.allEquip}}</div>
                    <div class="state">
                      <img :src="all"/>
                      <span class="smallTitle">总数</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="leftChild leftBody" @click="goToHistoryData" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)">
              <div class="dataView">
                <div class="viewTitle">
                  告警
                  <div class="titleRight">详情 <i class="el-icon-arrow-right titleIcon"></i></div>
                </div>
                <div>
                  <div class="tadayAlarm">
                    <div class="stateNumberRed">{{this.todayAlarm}}</div>
                    <div class="state">
                      <img :src="alarm"/>
                      <span class="smallTitle">今日告警(次)</span>
                    </div>
                  </div>
                  <div class="everyDayAlarm">
                    <div class="stateNumberCenter">{{this.everydayAlarm}}</div>
                    <div class="state">
                      <img :src="alarm"/>
                      <span class="smallTitle">日均告警(次)</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" class="centerCol">
          <div class="dataContent">
            <div class="leftChild leftBody" @click="toDetailed" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)">
              <div class="dataView">
                <div class="viewTitle">开机时间</div>
                <el-table
                  :data="allDetailedData"
                  :header-cell-style="{background:'#F0F2F7'}"
                  style="width: 100%">
                  <el-table-column
                    prop="equip_cid"
                    label="出厂编号"
                    width="150">
                  </el-table-column>
                  <el-table-column
                    prop="equip_type"
                    label="类型">
                  </el-table-column>
                  <el-table-column
                    prop="total_run_time"
                    label="时长"
                    width="75">
                  </el-table-column>
                </el-table>
                <div class="titleRight" @click="toDetailed">更多 <i class="el-icon-arrow-right titleIcon"></i></div>
                <div>
                  <div class="startTime">{{this.allOpenTime}}</div>
                  <div class="startTimeState">
                    <img :src="time"/>
                    <span class="smallTitle">总开机时间(h)</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="leftChild leftBody" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)">
              <div class="dataView">
                <div class="viewTitle">智能拍照</div>
                <el-carousel trigger="click" :interval="3000" arrow="hover">
                  <el-carousel-item v-for="item in imgData" :key="item">
                    <img class="imageSize" :src="item">
                  </el-carousel-item>
                </el-carousel>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8" class="rightCol">
          <div class="dataContent">
            <div class="leftChild leftBody" @click="toDetailed" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)">
              <div class="dataView">
                <div class="viewTitle">
                  起重量
                  <div class="titleRight" @click="toDetailed">详情 <i class="el-icon-arrow-right titleIcon"></i></div>
                </div>
                <div>
                  <div class="liftingWeightNumber">{{this.allWidth}}</div>
                  <div class="liftingWeight">
                    <img :src="weight"/>
                    <span class="smallTitle">起重量(吨)</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import { Navbar, Sidebar, AppMain } from '../layout/components'
  import open from '@/assets/controlStation/open.png'
  import close from '@/assets/controlStation/close.png'
  import all from '@/assets/controlStation/all.png'
  import time from '@/assets/controlStation/time.png'
  import weight from '@/assets/controlStation/weight.png'
  import alarm from '@/assets/controlStation/alarm.png'
  import noImage from '@/assets/controlStation/noImage.png'
  import axios from 'axios'
  import Axios from 'axios'
  export default {
    components: {
      Navbar,
      Sidebar,
      AppMain
    },
    data() {
      return {
        open,
        close,
        all,
        time,
        weight,
        alarm,
        noImage,
        imgData: [noImage],
        topTime: '',
        openEquip: '',
        closeEquip: '',
        allEquip: '',
        todayAlarm: '',
        everydayAlarm: '',
        allOpenTime: '',
        allWidth: '',
        equipData: [],
        allDetailedData: [],
        getEquipBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'console_get_equip_run_statis',
          datas: []
        },
        getColligateBody: {
          access_token: localStorage.getItem('access_token'),
          type: 'abstract_get_condition',
          data: {
            condition: {
            },
            page: {
              page_size: '100',
              page_number: '1'
            }
          }
        },
        getPicture: {
          access_token: localStorage.getItem('access_token'),
          type: 'console_get_event_pic'
        }
      }
    },
    mounted() {
      this.drawLine()
      this.getEquipData()
    },
    methods: {
      returnControlStation() {
        //  this.$message({
        //    showClose: true,
        //    message: '没得页面给你跳!',
        //    type: 'warning'
        //  })
      },
      goToHistoryData() {
        this.$router.push({ path: '/monitor/history' })
      },
      toDetailed() {
        this.$router.push({ path: '/controlStation/detailedInformation' })
      },
      getEquipData() {
        axios.post('/console', this.getEquipBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.equipData = res.data.datas
          this.openEquip = this.equipData[9].value
          this.closeEquip = this.equipData[10].value
          this.allEquip = this.equipData[8].value
          this.todayAlarm = this.equipData[6].value
          this.everydayAlarm = this.equipData[7].value
          this.allOpenTime = this.equipData[4].value
          this.allWidth = this.equipData[5].value
        })
          .catch(function(error) {
            console.log(error)
          })
        axios.post('/console', this.getColligateBody, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.allDetailedData = []
          this.allDetailedData.push(res.data.data.items[0])
          this.allDetailedData.push(res.data.data.items[1])
        })
          .catch(function(error) {
            console.log(error)
          })
        axios.post('/console', this.getPicture, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          if (res.data.datas.length > 0) {
            this.imgData = []
            for (let i = 0; i < res.data.datas.length; i++) {
              this.imgData.push(Axios.defaults.baseURL + '/' + res.data.datas[i].path + '/' + res.data.datas[i].file_name)
            }
          }
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      drawLine() {
        var weekShow = ''
        if (new Date().getDay() === 1) {
          weekShow = '一'
        } else if (new Date().getDay() === 2) {
          weekShow = '二'
        } else if (new Date().getDay() === 3) {
          weekShow = '三'
        } else if (new Date().getDay() === 4) {
          weekShow = '四'
        } else if (new Date().getDay() === 5) {
          weekShow = '五'
        } else if (new Date().getDay() === 6) {
          weekShow = '六'
        } else if (new Date().getDay() === 7) {
          weekShow = '七'
        }
        this.topTime = (new Date().getFullYear() + '.' + (new Date().getMonth() + 1) + '.' + new Date().getDate() + ' ' + '星期' + weekShow)
      },
      changeActive($event) {
        $event.currentTarget.className = 'leftChild leftBody active'
      },
      removeActive($event) {
        $event.currentTarget.className = 'leftChild leftBody'
      }
    }
  }

</script>
<style scoped>
  .homeNav{
    width: 100%;
    height: 50px;
    background-color: #25B6C7;
  }
  .summary-containner{
    width: 100%;
    min-height: 500px;
    font-size: 16px;
    color: #25B6C7;
  }
  /deep/ .outMore{
    height: 40px;
    padding-top: 2px;
    margin: 20px 20px 0px 20px;
    border-bottom: 1px solid #E1E1E1;
  }
  /deep/ img {
    vertical-align: middle;
  }
  /deep/ .smallTitle {
    vertical-align: middle;
  }
  /deep/ .titleRight {
    float: right;
    font-weight: normal;
    font-size: 14px;
    color: #25B6C7;
    cursor: pointer;
  }
  /deep/ .state {
    height: 60px;
    width: 100%;
    color: #69727E;
    padding-top: 20px;
    margin-top: 25px;
    text-align: center;
    border-radius: 30px;
    background: #F0F2F7;
  }
  /deep/ .stateNumber {
    font-weight: bold;
    font-size: 64px;
    text-align: center;
    margin-top: 75px;
  }
  /deep/ .stateNumberCenter {
    color: #69727E;
    font-weight: bold;
    font-size: 64px;
    text-align: center;
    margin-top: 75px;
  }
  /deep/ .stateNumberRed {
    color: #E53D41;
    font-weight: bold;
    font-size: 64px;
    text-align: center;
    margin-top: 75px;
  }
  /deep/ .startEquipment {
    margin: 0px 3% 0px 4%;
    width: 26%;
    float: left;
  }
  /deep/ .notEnabledEquipment {
      margin: 0px 4% 0px 4%;
      width: 26%;
      float: left;
    }
  /deep/ .allEquipment {
    margin: 0px 4% 0px 3%;
    width: 26%;
    float: left;
  }

  /deep/ .liftingWeightNumber {
    font-weight: bold;
    font-size: 64px;
    margin-top: 75px;
    text-align: center;
  }
  /deep/ .liftingWeight {
    height: 60px;
    width: 200px;
    color: #69727E;
    padding-top: 20px;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-radius: 30px;
    background: #F0F2F7;
  }
  /deep/ .tadayAlarm {
    margin: 0px 9% 0px 11%;
    width: 30%;
    float: left;
  }
  /deep/ .el-carousel__item {
    text-align: center;
  }
  /deep/ .el-carousel__indicators {
    display: none;
  }
  /deep/ .imageSize {
    width: 100%;
    height: 100%;
  }
  /deep/ .everyDayAlarm {
    margin: 0px 11% 0px 9%;
    width: 30%;
    float: left;
  }
  /deep/ .startTime {
    font-weight: bold;
    font-size: 64px;
    height: 64px;
    text-align: center;
    margin-top: 25px;
  }
  /deep/ .startTimeState {
    height: 60px;
    width: 200px;
    color: #69727E;
    padding-top: 20px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-radius: 30px;
    background: #F0F2F7;
  }
  /deep/ .titleIcon {
    font-weight: bold;
  }
  /deep/ #tadayText {
    font-weight: bold;
    margin-right: 20px;
  }
  /deep/ .tadayTime {
    margin: 0px 20px 0px 20px;
    font-size: 18px;
    height: 40px;
    padding:10px 0px 0px 20px;
    vertical-align:middle;
    background: #F0F2F7;
    color: #25B7C8;
  }
  /deep/ .el-table th.is-leaf {
    padding: 3px 0px;
  }
  /deep/ .el-table td {
    padding: 6px 0px;
  }
  /deep/ .dataTitle {
    padding-left: 5px;
    border-left: 5px solid #25B6C7;
    height: 16px;
    font-size: 16px;
    color: #323842;
  }
  .el-carousel__item h3 {
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .el-row {
    margin: 0px 20px;
  }
  .leftCol {
    padding-right: 10px;
  }
  .centerCol {
    padding: 0px 10px;
  }
  .rightCol {
    padding-left: 10px;
  }
  .dataContent {
    height: 800px;
  }
  .leftBody {
    margin-top: 20px;
    height: 380px;
  }
  .leftChild {
    width: 100%;
    border: 1px solid #E1E1E1;
    padding: 20px;
    cursor: pointer;
  }
  .dataView {
    width: 100%;
    height: 100%;
  }
  .viewTitle {
    color: #323842;
    font-size: 20px;
    height: 20px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  .active {
    border: 1px solid #25B6C7;
  }
</style>
